<template>
  <tr>
    <td>{{item.id}}</td>
    <td>
      <span v-if="!item.isedit">
        {{item.name}}
      </span>
      <input v-else :value="item.name" @change="handleChage" />
    </td>
    <td>
      <button v-if="!item.isedit" @click="UPDATE_STATUS({id:item.id,isedit:true})">编辑</button>

      <button v-if="item.isedit" @click="UPDATE({id:item.id,isedit:false,name})">提交</button>

      <button @click="DEL(item.id)">删除</button>
    </td>
  </tr>
</template>
<script>
import { mapMutations } from "vuex"
export default {
  data() {
    return {
      name: this.item.name
    }
  },
  props: ["item"],
  methods: {
    ...mapMutations(["DEL", "UPDATE_STATUS", "UPDATE"]),
    handleDel(id) {
      // this.$store.commit("DEL", id)
      // this.DEL(id);
    },
    handleChage(e) {
      this.name = e.target.value
    }
  }
}
</script>

